<template>
  <div>
    <ZgDataImport ref="import" :showBtn="false" fileName="test.xlsx" url="/zg-system/dic/import" @ok="onImportOk">
    </ZgDataImport>
    <ZgPage
      ref="page"
      title="角色管理"
      addBtnName="新增角色"
      :addOpt="{ title: '新增角色' }"
      :updateOpt="{ title: '编辑角色' }"
      :batchOpt="{ title: '批量设置' }"
      :batchBtns="batchBtns"
      @search="onSearch"
      @del="onDel"
      @add="onAdd"
      @update="onUpdate"
      @batch="onBatch"
      :extraBtns="[
        {
          key: 'menu',
          name: '分配菜单',
          isShow: (obj) => {
            return true
          },
        },
        {
          key: 'user',
          name: '分配人员',
          isShow: (obj) => {
            return true
          },
        },
      ]"
      @extraAdd="onExtraAdd"
      @extraBtn="onExtraBtn"
    >
      <template slot="columns">
        <a-table-column :width="140" dataIndex="name" title="角色名称"></a-table-column>
        <a-table-column :width="100" dataIndex="code" title="角色编码"></a-table-column>
      </template>
      <template slot="add">
        <Add ref="add"></Add>
      </template>
      <template slot="update" slot-scope="scope">
        <Update ref="update" :jsonStr="scope.jsonStr"></Update>
      </template>
    </ZgPage>
    <Batch ref="batch" @ok="onBatchOk"></Batch>
    <ZgPersonnelChoose ref="personnelChoose" :selceted="selceted" @onOk="save"></ZgPersonnelChoose>

  </div>
</template>
<script>
import Add from './Add'
import Update from './Update'
import Batch from './Batch'
export default {
  components: {
    Add,
    Update,
    Batch
  },
  data () {
    return {
      batchBtns: [{ label: '批量删除', code: 'del' }],
      selceted: [],
      currentRoleId: null
    }
  },
  methods: {
    onSearch (param) {
      this.$http.post('/zg-system/role/page', param, (data) => {
        this.$refs.page.endSearch({
          total: parseInt(data.total),
          list: data.records.map((t) => {
            t.key = t.id
            return t
          })
        })
      })
    },
    onDel (ids) {
      this.$http.post('/zg-system/role/remove', ids, () => {
        this.$refs.page.search()
      })
    },
    onAdd () {
      const result = this.$refs.add.save()
      if (!result.isOk) {
        this.$error({ title: result.msg })
        return
      }
      this.$http.post('/zg-system/role/add', result.data, () => {
        this.$refs.page.hideAdd()
        this.$refs.page.search()
      })
    },
    onUpdate () {
      const result = this.$refs.update.save()
      if (!result.isOk) {
        this.$error({ title: result.msg })
        return
      }
      this.$http.post('/zg-system/role/edit', result.data, () => {
        this.$refs.page.hideUpdate()
        this.$refs.page.search()
      })
    },
    onBatch () {
      const result = this.$refs.batch.save()
      if (!result.isOk) {
        this.$error({ title: result.msg })
        return
      }
      this.$http.post('/zg-system/dic/batch', result.data, () => {
        this.$refs.page.hideBatch()
        this.$refs.page.search()
      })
    },
    onExtraAdd (i) {
      if (i === 0) {
        this.$refs.import.open()
      } else if (i === 1) {
        this.$http.download('/zg-system/dic/export', {}, '角色数据.xlsx')
      }
    },
    onImportOk () {
      this.$refs.page.search()
    },
    onExtraBtn (val) {
      switch (val.key) {
        case 'menu':
          this.allocationMunu(val.obj)
          break
        case 'user':
          this.allocationUser(val.obj)
      }
    },
    allocationMunu (val) {
      this.$http.post('/zg-system/role/listMenu', { roleId: val.id }, (res) => {
        console.log(res, 'res')
        this.$refs.batch.open({
          val,
          data: res
        })
      })
    },
    allocationUser (val) {
      this.$http.post('/zg-system/role/listUser', { roleId: val.id }, res => {
        this.currentRoleId = val.id
        if (Array.isArray(res) && res.length > 0) {
          this.selceted = res.map(item => item.userId)
        } else {
          this.selceted = []
        }
    this.$refs.personnelChoose.open()
      })
    },
    save (users) {
      if (!this.currentRoleId) {
        this.$error({ title: '请先选择角色' })
        return
      }
      const userIds = users.map(u => u.id)
      const data = {
        roleId: this.currentRoleId,
        userIds
      }
      this.$http.post('/zg-system/role/addUser', data, () => {
        this.$success({ title: '分配成功' })
        this.$refs.page.search()
      })
    },
    onBatchOk (data) {
      // 处理批量操作结果
      console.log('Batch operation result:', data)

      // 调用保存角色菜单分配的接口
      this.$http.post('/zg-system/role/addMenu', data, () => {
        this.$success({ title: '菜单分配成功' })
        this.$refs.page.search() // 刷新页面数据
      }, (error) => {
        this.$error({ title: '菜单分配失败：' + error.message })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
